<template>
  <div class="app-container">
    <h1>答辩成绩分析</h1>
    <el-divider/>
    <el-row>
      <el-col :sm="12" :xs="24">
        <div v-loading="loading1" id="chart1" element-loading-text="正在计算中" style="height:400px;width:100%"/>
      </el-col>
      <el-col :sm="12" :xs="24">
        <div v-loading="loading2" id="chart2" element-loading-text="正在计算中" style="height:400px;width:100%"/>
      </el-col>
    </el-row>
    <br>
    <br>
    <br>
    <el-row>
      <el-col :sm="12" :xs="24">
        <div v-loading="loading3" id="chart3" element-loading-text="正在计算中" style="height:400px;width:100%"/>
      </el-col>
      <el-col :sm="12" :xs="24">
        <div v-loading="loading4" id="chart4" element-loading-text="正在计算中" style="height:400px;width:100%"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import studentReplyApi from '@/api/student/reply'

const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/grid')
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/legend')
require('echarts/lib/component/title')
require('echarts/lib/chart/radar')

export default {
  data() {
    return {
      loading1: true,
      loading2: true,
      loading3: true,
      loading4: true,

      data1: [],
      data2: [],
      data3: [],
      data4: [],
      data5: []
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      studentReplyApi.analyse(this.$route.query.replyId).then(res => {
        this.data1 = res.result.slice(0, 5)
        this.data2 = res.result.slice(5, 11)
        this.data3 = res.result.slice(11, 16)
        this.data4 = res.result.slice(16, 21)
        this.data5 = res.result.slice(21, 27)
        this.showChart1()
        this.showChart2()
        this.showChart3()
        this.showChart4()
      }).catch(error => {
        console.log(error)
      })
    },
    showChart1() {
      var myChart1 = echarts.init(document.getElementById('chart1'))
      var option1 = {
        title: {
          text: '分数分布对比折线图',
          top: 'bottom',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['学生匿名评分', '教师评分']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['差', '合格', '一般', '良好', '优秀']
        },
        yAxis: {
          type: 'value',
          name: '人',
          boundaryGap: [0, 0.5],
          interval: 1,
          min: 0
        },
        series: [
          {
            name: '学生匿名评分',
            type: 'line',
            stack: 'stu',
            data: this.data4
          },
          {
            name: '教师评分',
            type: 'line',
            stack: 'tea',
            data: this.data3
          }
        ],
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              title: '保存',
              show: true,
              excludeComponents: ['toolbox'],
              pixelRatio: 2
            }
          }
        }
      }
      myChart1.setOption(option1)
      this.loading1 = false
    },
    showChart2() {
      var myChart2 = echarts.init(document.getElementById('chart2'))
      var option2 = {
        title: {
          text: '分数分布对比条形图',
          top: 'bottom',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['学生匿名评分', '教师评分']
        },
        xAxis: {
          type: 'value',
          name: '人',
          boundaryGap: [0, 0.5],
          interval: 1,
          min: 0
        },
        yAxis: {
          type: 'category',
          data: ['差', '合格', '一般', '良好', '优秀']
        },
        series: [
          {
            name: '学生匿名评分',
            type: 'bar',
            data: this.data4
          },
          {
            name: '教师评分',
            type: 'bar',
            data: this.data3
          }
        ],
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              title: '保存',
              show: true,
              excludeComponents: ['toolbox'],
              pixelRatio: 2
            }
          }
        }
      }
      myChart2.setOption(option2)
      this.loading2 = false
    },
    showChart3() {
      var myChart3 = echarts.init(document.getElementById('chart3'))
      var option3 = {
        title: {
          text: '分数分析柱状图',
          top: 'bottom',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['中位数', '众数', '平均分', '最高分', '最低分', '标准差']
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100
        },
        series: [{
          data: this.data5,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }],
        tooltip: {
          trigger: 'axis',
          formatter(param) {
            return '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#5470C6"></span> ' +
              param[0].name + ' ' + param[0].value
          }
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              title: '保存',
              show: true,
              excludeComponents: ['toolbox'],
              pixelRatio: 2
            }
          }
        }
      }
      myChart3.setOption(option3)
      this.loading3 = false
    },
    showChart4() {
      var myChart4 = echarts.init(document.getElementById('chart4'))
      var option4 = {
        title: {
          text: '分数对比雷达图',
          top: 'bottom',
          left: 'center'
        },
        legend: {
          data: ['学生成绩', '平均成绩']
        },
        radar: {
          indicator: [
            { name: '中位数', max: 100 },
            { name: '众数', max: 100 },
            { name: '总评分', max: 100 },
            { name: '最高评分', max: 100 },
            { name: '最低评份', max: 100 },
            { name: '标准差', max: 100 }
          ]
        },
        series: [{
          name: '预算 vs 开销（Budget vs spending）',
          type: 'radar',
          data: [
            {
              value: this.data5,
              name: '学生成绩'
            },
            {
              value: this.data2,
              name: '平均成绩'
            }
          ]
        }],
        tooltip: {},
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              title: '保存',
              show: true,
              excludeComponents: ['toolbox'],
              pixelRatio: 2
            }
          }
        }
      }
      myChart4.setOption(option4)
      this.loading4 = false
    }
  }
}
</script>
